<template>
  <div class="content">
	<van-list
	  :offset="offset"
	  v-model="loading"
	  :finished="finished"
	  finished-text="没有更多了"
	  @load="onLoad">
      <ul>
        <li class="contLi" v-for="(item,index) in table" :key="index">
            <div class="left">
                <div class="leftLi">
                   <span class="title">单据号</span>
                   <span class="desc">{{item.djh}}</span>
                </div>
                <div class="leftLi">
                   <span class="title">物料名称</span>
                   <span class="desc">{{item.wlname}}</span>
                </div>
                <div class="leftLi">
                   <span class="title">物料编号</span>
                   <span class="desc">{{item.wlnumber}}</span>
                </div>
                <div class="leftLi">
                   <span class="title">采购数量</span>
                   <span class="desc">{{item.cgnumber}}</span>
                </div>
            </div>
            <div class="right">
                <van-button type="primary" class="btn" @click="ruku(item.djh)" v-show="item.state==1">开始入库</van-button>
                <van-button type="primary" class="btn" @click="ruku(item.djh)" v-show="item.state==2">入库中</van-button>
            </div>
        </li>
      </ul>
	</van-list>
  </div>
</template>

<script>
  import http from '@/utils/request.js';
  import api from "@/utils/api";
  export default {
    name:"WareHousing",
    data(){
      return{
        page: 1,//请求第几页
        pageSize: 10,//每页请求的数量
        total: 0,//总共的数据条数
        offset:0,
        loading: false,
        finished: false,
        table:[
          {djh:'RK0001',wlname:'物料1111111113333名称物料1111111113333名称物料',wlnumber:'111',cgnumber:'12000',state:'1'},
          {djh:'RK0002',wlname:'物料名称',wlnumber:'111',cgnumber:'12000',state:'2'},
          {djh:'RK0003',wlname:'物料名称',wlnumber:'111',cgnumber:'12000',state:'1'},
        ]
      }
    },
	created() {

	},
   methods:{
      getTableList(){
        var data = {
          page:this.page,
          pageSize:this.pageSize
        }
        // http.fetchPost().then(res =>{});

      },
      onLoad() {
        this.getTableList();
      },
      ruku(index){
        console.log(index);
        // http.fetchGet().then(res =>{});
      }
    }
  }
</script>

<style scoped>
    .contLi{
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-top: 10px;
    }
    .left{
	  width: 70%;
      text-align: left;
    }
    .btn{
      height: 36px;
      line-height: 36px;
      min-width: 100px;
      border-radius: 50px;
    }
	.leftLi{
		display: flex;
		line-height: 30px;
	}
	.title{
		min-width: 33%;
	}
	.desc{
		margin-left: 20px;
	}
	.van-button--primary{
		background-color: rgba(71, 124, 236, 1);
	}
</style>
